<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <!-- v-model 用于绑定，此时如果输入框东西变了那么h1也会变，可以实时更新 -->

    请输入内容&nbsp;<input type="text" v-model="content">{{age}}
    <button @click="tianjia">添加新的便利贴内容</button>
    <ul v-show="bianlitielist.length!=0">
      <li v-for="(content,index) in bianlitielist" :key="index"> {{index+1}}. {{content}}</li>
      <a href="#" @click="delcontent(index)">删除</a>
    </ul>
    <ul v-if="bianlitielist.length==0">
      <li>
        <font style="color: red;">当前便利贴没有任何数据</font>
      </li>
    </ul>
    <!-- 当便利贴有内容的时候展示出来这个a标签 -->
    <a href="#" v-show="bianlitielist.length!=0" @click="bianlitielist=[]">清空便利贴</a>
    <h2>当前便利贴共有{{bianlitielist.length}}条数据</h2>
  </div>
  <script src="/vue/lib/vue.js"></script>
  <script>
    var vue = new Vue({
      el: '#box',
      data: {
        content: '',
        age: 18,
        bianlitielist: ['瘦到120', '去泰国', '五一之前']
      },
      methods: {
        tianjia() {
          // alert(12)
          if (!this.content) {
            alert('请输入内容')
          } else {
            this.bianlitielist.push(this.content)
          }
        },
        delcontent(index) {
          this.bianlitielist.splice(index, 1)

        }
      }
    })
  </script>
</body>

</html>